/**
  时间选择器
 */
<template>
  <div class="time-picker-style">
    <p>接待时间:</p>
    <el-date-picker
      class="el_data_picker_class"
      v-model="timeRangeValue"
      prefix-icon="el-icon-time"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="small"
      :disabledDate="disabledDate"
    >
    </el-date-picker>
    <el-radio-group
      v-model="dateButton"
      size="small"
    >
      <el-radio-button
        v-for="option in option_time_range"
        :label="option.label"
        :type="option.type"
        size="small"
        @click="timeRangeOptionChanged(option)"
      >
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
import { reactive, ref, toRefs, getCurrentInstance, watch } from 'vue'
import dayjs from "dayjs";

export default {
  props: {
    //可选日期范围
    dateLimit: {
      type: Number
    },
  },
  setup(props, { emit }) {

    //初始默认时间[昨天]
    const firstTime = dayjs(Date.now() - 24 * 3600 * 1000).format("YYYY-MM-DD");

    const timeData = reactive({
      timeRangeValue: [firstTime, firstTime],
    })

    //如果点击删除时间,按键恢复为昨日
    watch(() => timeData.timeRangeValue, (n, o) => {
      if (timeData.timeRangeValue == null) {
        optionData.dateButton = '昨日'
      }
      if (n != o) {
        optionData.dateButton = ''
      }
    })

    // 设置默认按键为昨日
    const optionData = reactive({
      dateButton: '昨日'
    })

    //清空筛选条件恢复默认值
    const clear = () => {
      timeData.timeRangeValue = [firstTime, firstTime];
      optionData.dateButton = '昨日'
    }

    const timeRangeOptionChanged = (option) => {
      emitPickerValue(option.value)
    }

    //按键日期范围
    const emitPickerValue = (day) => {
      var start = dayjs(Date.now() - 24 * 3600 * 1000 * day).format("YYYY-MM-DD")
      var end = dayjs(Date.now() - 24 * 3600 * 1000).format("YYYY-MM-DD")

      timeData.timeRangeValue = [start, end]
    }

    //设置禁用日期
    const disabledDate = (time) => {
      let offset = 24 * props.dateLimit * 3600 * 1000;
      var endTime = dayjs(Date.now() - 24 * 1000 * 3600).$d;

      return (
        time.getTime() < endTime - offset || time.getTime() > endTime.getTime()
      )
    }

    return {
      firstTime,
      ...toRefs(timeData),
      ...toRefs(optionData),
      clear,
      timeRangeOptionChanged,
      emitPickerValue,
      disabledDate,
      option_time_range: [
        {
          value: 1,
          label: "昨日",
          type: "",
        },
        {
          value: 7,
          label: "近7日",
          type: "",
        },
        {
          value: 30,
          label: "近30日",
          type: "",
        },
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.time-picker-style {
  margin-left: 24px;
  p {
    display: inline-block;
    margin-right: 8px;
    color: #404040;
    font-size: 14px;
  }
  .el-radio-group {
    margin-top: -2px;
    margin-left: 8px;
    &:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
      z-index: 1;
      border: 1px solid #297ce6 !important;
      background-color: #fff;
      box-shadow: none !important;
      color: #297ce6;
    }
  }
  &:deep(.prev-month) {
    color: red;
  }
}
</style>

